<template>
  <div id="main">
    <div v-if="loginT" class="cont">
      <p><input type="text" v-model="user.username" placeholder="用户名"></p>
      <p><input type="password" v-model="user.password" placeholder="密码"></p>
      <p>
        <el-button @click="login" type="info" plain>登 录</el-button>
        <span class="btn" @click="loginT=false">去注册</span>
      </p>
    </div>
    <div v-else class="cont">
      <p><input type="text" v-model="user.username" placeholder="用户名"></p>
      <p><input type="password" v-model="user.password" placeholder="密码"></p>
      <p><input type="password" v-model="password" placeholder="再次输入密码"></p>
      <p><input type="text" v-model="user.email" placeholder="邮箱"></p>
      <p>
        <el-button @click="register" type="info" plain>注 册</el-button>
        <span class="btn" @click="loginT=true">去登录</span>
      </p>
    </div>
  </div>
</template>

<script>
import {userGet, userLogin, userPost} from "@/api/user";

export default {
  name: "indexT",
  data(){
    return{
      user:{
        id:'',
        username:'',
        password:'',
        email:''
      },
      loginT:true,
      password:''
    }
  },
  methods:{
    login(){

      if(this.nameCheck()) return;

      userLogin(this.user).then((res)=>{

        let result=res.data;

        if(result.code==="100"){

          this.$notify.success(this.notifyMsgSuc('登录成功！欢迎你:'+this.user.username));
          userGet(result.data).then(res=>{
            let x=res.data.data;
            x.password=null;
            localStorage.removeItem(this.userObjectName);
            this.localSetObject(this.userObjectName,x);
          }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));

          this.$router.push('/index');

        }else this.$notify.error(this.notifyMsgErr(result.msg));

      }).catch(error=>this.$notify.error(this.notifyMsgErr(error.message)));

    },
    register(){

      if(this.emailCheck()||this.nameCheck()) return;

      if(this.password===this.user.password){

      // console.log();
      userPost(this.user).then((res)=>{

        let result=res.data;

        if(result.code==="100"){

          this.$notify.success(this.notifyMsgSuc("注册成功！欢迎你:"+this.user.username));
          userGet(result.data).then(res=>{
            let x=res.data.data;
            x.password=null;
            localStorage.removeItem(this.userObjectName);
            this.localSetObject(this.userObjectName,x);
            console.log(x);
          }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));
          this.$router.push('/index');

        }else this.$notify.error(this.notifyMsgErr(result.msg));

      }).catch(error=>this.$notify.error(this.notifyMsgErr(error.message)))

      }else this.$notify.error(this.notifyMsgErr("密码不一致！"));
    },
    emailCheck(){
      if(!this.userEmailCheck.test(this.user.email)){
        this.$notify.error("邮箱格式有误！");
        return true;
      }return false;
    },
    nameCheck(){
      if(this.user.password.trim()==="") {
        this.$notify.error("密码不能为空！");
        return true;
      }
      if(!this.userNameCheck.test((this.user.username))){
        this.$notify.error("用户名有误！请使用字母开头和数字结合！");
        return true;
      }return false;
    }
  }
}
</script>

<style lang="less" scoped>
  *{
    user-select: none;
  }
  #main{
    height: 100%;
    background: #f1ede2 url("/src/assets/imags/login背景.jpeg") no-repeat top;
    background-size: cover;
    text-align: center;
    .cont{
      position: absolute;
      top:40%;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color: #cacece;
      padding: 20px 40px;
      border-radius: 30px;
      opacity: 0.9;
      input{
        height: 25px;
        border-radius: 5px;
      }
    }
    p{
      line-height: 40px;
      margin-top: 5px;
    }
  }
</style>
